<template>
  <div class="tutorial-overlay" @click="$emit('close')">
    <div class="tutorial-modal" @click.stop>
      <div class="tutorial-header">
        <h2>🎵 音乐文件URL获取教程</h2>
        <button @click="$emit('close')" class="close-btn">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
          </svg>
        </button>
      </div>
      
      <div class="tutorial-content">
        <!-- 概述 -->
        <section class="tutorial-section">
          <h3>📋 概述</h3>
          <p>本教程将指导您如何从各大音乐平台获取音乐文件的URL链接，用于在系统中添加音乐。</p>
          <div class="important-note">
            <strong>⚠️ 重要提示：</strong>
            <ul>
              <li>请确保您有权使用所获取的音乐文件</li>
              <li>遵守各平台的服务条款和版权规定</li>
              <li>建议优先使用官方API或授权渠道</li>
            </ul>
          </div>
        </section>

        <!-- 网易云音乐 -->
        <section class="tutorial-section">
          <h3>🔴 网易云音乐</h3>
          <div class="platform-tutorial">
            <div class="step">
              <h4>步骤 1：获取歌曲ID</h4>
              <ol>
                <li>打开网易云音乐网页版 (music.163.com)</li>
                <li>搜索并进入想要的歌曲页面</li>
                <li>查看浏览器地址栏，找到类似 <code>song?id=123456789</code> 的部分</li>
                <li>复制数字ID（如：123456789）</li>
              </ol>
            </div>
            <div class="step">
              <h4>步骤 2：输入系统</h4>
              <p>在音乐上传页面选择"网易云音乐"，输入获取到的数字ID即可。</p>
            </div>
            <div class="example">
              <strong>示例：</strong>
              <div class="example-url">
                URL: https://music.163.com/song?id=1234567890
              </div>
              <div class="example-id">
                ID: 1234567890
              </div>
            </div>
          </div>
        </section>

        <!-- QQ音乐 -->
        <section class="tutorial-section">
          <h3>🎵 QQ音乐</h3>
          <div class="platform-tutorial">
            <div class="step">
              <h4>步骤 1：获取歌曲ID</h4>
              <ol>
                <li>打开QQ音乐网页版 (y.qq.com)</li>
                <li>搜索并进入想要的歌曲页面</li>
                <li>查看浏览器地址栏，找到类似 <code>song.html?songmid=ABC123DEF</code> 的部分</li>
                <li>复制songmid的值（如：ABC123DEF）</li>
              </ol>
            </div>
            <div class="step">
              <h4>步骤 2：输入系统</h4>
              <p>在音乐上传页面选择"QQ音乐"，输入获取到的songmid即可。</p>
            </div>
            <div class="example">
              <strong>示例：</strong>
              <div class="example-url">
                URL: https://y.qq.com/n/yqq/song/ABC123DEF.html
              </div>
              <div class="example-id">
                ID: ABC123DEF
              </div>
            </div>
          </div>
        </section>

        <!-- 酷狗音乐 -->
        <section class="tutorial-section">
          <h3>🎤 酷狗音乐</h3>
          <div class="platform-tutorial">
            <div class="step">
              <h4>步骤 1：获取歌曲Hash</h4>
              <ol>
                <li>打开酷狗音乐网页版 (www.kugou.com)</li>
                <li>搜索并进入想要的歌曲页面</li>
                <li>查看浏览器地址栏，找到类似 <code>song/#hash=ABCDEF123456</code> 的部分</li>
                <li>复制hash的值（如：ABCDEF123456）</li>
              </ol>
            </div>
            <div class="step">
              <h4>步骤 2：输入系统</h4>
              <p>在音乐上传页面选择"酷狗音乐"，输入获取到的hash值即可。</p>
            </div>
            <div class="example">
              <strong>示例：</strong>
              <div class="example-url">
                URL: https://www.kugou.com/song/#hash=ABCDEF123456
              </div>
              <div class="example-id">
                Hash: ABCDEF123456
              </div>
            </div>
          </div>
        </section>

        <!-- 自定义URL -->
        <section class="tutorial-section">
          <h3>🔗 自定义URL</h3>
          <div class="platform-tutorial">
            <div class="step">
              <h4>直接音频链接</h4>
              <p>如果您有直接的音频文件链接，可以选择"自定义URL"选项直接输入完整URL。</p>
            </div>
            <div class="supported-formats">
              <h4>支持的格式：</h4>
              <ul>
                <li>MP3 (.mp3)</li>
                <li>WAV (.wav)</li>
                <li>FLAC (.flac)</li>
                <li>AAC (.aac)</li>
                <li>OGG (.ogg)</li>
                <li>M4A (.m4a)</li>
              </ul>
            </div>
            <div class="example">
              <strong>示例：</strong>
              <div class="example-url">
                https://example.com/music/song.mp3
              </div>
            </div>
          </div>
        </section>

        <!-- 注意事项 -->
        <section class="tutorial-section">
          <h3>⚠️ 注意事项</h3>
          <div class="warning-list">
            <div class="warning-item">
              <h4>🔒 版权保护</h4>
              <p>请确保您有权使用所上传的音乐文件，遵守相关版权法律法规。</p>
            </div>
            <div class="warning-item">
              <h4>🌐 网络访问</h4>
              <p>确保URL链接可以公开访问，避免使用需要登录或有地域限制的链接。</p>
            </div>
            <div class="warning-item">
              <h4>📱 跨域问题</h4>
              <p>某些平台可能存在跨域限制，建议使用测试功能验证链接有效性。</p>
            </div>
            <div class="warning-item">
              <h4>⚡ 链接稳定性</h4>
              <p>音乐平台的链接可能会变化，建议定期检查和更新失效链接。</p>
            </div>
          </div>
        </section>

        <!-- 故障排除 -->
        <section class="tutorial-section">
          <h3>🔧 故障排除</h3>
          <div class="troubleshooting">
            <div class="problem">
              <h4>❌ 测试播放失败</h4>
              <ul>
                <li>检查网络连接是否正常</li>
                <li>确认ID或URL格式正确</li>
                <li>尝试在浏览器中直接访问生成的URL</li>
                <li>检查音乐平台是否更新了API</li>
              </ul>
            </div>
            <div class="problem">
              <h4>🚫 无法播放</h4>
              <ul>
                <li>确认音频格式被支持</li>
                <li>检查服务器防火墙设置</li>
                <li>尝试使用其他平台的音源</li>
                <li>联系技术支持获取帮助</li>
              </ul>
            </div>
          </div>
        </section>
      </div>

      <div class="tutorial-footer">
        <button @click="$emit('close')" class="btn btn-primary">
          我知道了
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MusicUrlTutorial',
  emits: ['close']
}
</script>

<style scoped>
.tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.tutorial-modal {
  background: #1a1a1a;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid #333;
}

.tutorial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #1DB954, #1ed760);
  color: white;
}

.tutorial-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tutorial-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  color: #e0e0e0;
}

.tutorial-section {
  margin-bottom: 32px;
}

.tutorial-section h3 {
  color: #1DB954;
  font-size: 20px;
  margin-bottom: 16px;
  border-bottom: 2px solid #1DB954;
  padding-bottom: 8px;
}

.tutorial-section h4 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 12px;
}

.tutorial-section p {
  line-height: 1.6;
  margin-bottom: 12px;
}

.important-note {
  background: #2a1810;
  border: 1px solid #ff6b35;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}

.important-note strong {
  color: #ff6b35;
}

.important-note ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.platform-tutorial {
  background: #242424;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #404040;
}

.step {
  margin-bottom: 20px;
}

.step ol {
  padding-left: 20px;
  margin: 8px 0;
}

.step li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.example {
  background: #1a1a1a;
  border-radius: 6px;
  padding: 16px;
  border-left: 4px solid #1DB954;
  margin-top: 16px;
}

.example-url, .example-id {
  font-family: monospace;
  background: #000;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
  color: #00ff88;
  border: 1px solid #333;
}

.supported-formats ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  list-style: none;
  padding: 0;
}

.supported-formats li {
  background: #333;
  padding: 8px 12px;
  border-radius: 4px;
  text-align: center;
  font-family: monospace;
  color: #1DB954;
}

.warning-list {
  display: grid;
  gap: 16px;
}

.warning-item {
  background: #2a2a2a;
  border-radius: 8px;
  padding: 16px;
  border-left: 4px solid #ff9500;
}

.warning-item h4 {
  color: #ff9500;
  margin-bottom: 8px;
}

.troubleshooting {
  display: grid;
  gap: 20px;
}

.problem {
  background: #2a1a1a;
  border-radius: 8px;
  padding: 16px;
  border-left: 4px solid #ff4757;
}

.problem h4 {
  color: #ff4757;
  margin-bottom: 12px;
}

.problem ul {
  padding-left: 20px;
  margin: 0;
}

.problem li {
  margin-bottom: 8px;
  line-height: 1.5;
}

code {
  background: #333;
  color: #1DB954;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 13px;
}

.tutorial-footer {
  padding: 20px 24px;
  background: #2a2a2a;
  border-top: 1px solid #404040;
  display: flex;
  justify-content: center;
}

.btn {
  background: linear-gradient(135deg, #1DB954, #1ed760);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(29, 185, 84, 0.3);
}

/* 滚动条样式 */
.tutorial-content::-webkit-scrollbar {
  width: 6px;
}

.tutorial-content::-webkit-scrollbar-track {
  background: #2a2a2a;
}

.tutorial-content::-webkit-scrollbar-thumb {
  background: #1DB954;
  border-radius: 3px;
}

.tutorial-content::-webkit-scrollbar-thumb:hover {
  background: #1ed760;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tutorial-modal {
    width: 95%;
    max-height: 95vh;
  }
  
  .tutorial-header {
    padding: 16px 20px;
  }
  
  .tutorial-header h2 {
    font-size: 20px;
  }
  
  .tutorial-content {
    padding: 20px;
  }
  
  .tutorial-section h3 {
    font-size: 18px;
  }
  
  .supported-formats ul {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}
</style> 